<template>
	<div v-show="showPage">
		<div style="border-bottom: 1px solid #ddd;">
			<h3>显示字段</h3>
		</div>
		<div style="max-height:350px;overflow: auto;display: flex;">
			<div>
				<div style="display: flex;">
					<div style="width:100px;text-align: center;display: flex;">
						<el-checkbox v-model="selectAll" style="height: 24px;" @change="onSelectAllChangeHandler"></el-checkbox>
						显示列
					</div>
					<div style="width:150px;text-align: center;">
						列名
					</div>
					<div style="width:150px;text-align: center;">
						名称
					</div>
					<div style="width:150px;text-align: center;">
						视图类型
					</div>
				</div>
				<draggable :list="fieldList">
					<div v-for="element in fieldList" :key="element.columnName" style="display: flex;margin-top: 5px;">
						<div style="width:60px;text-align: center;">
							<el-checkbox v-model="element.display" style="height: 24px;"></el-checkbox>
						</div>
						<div style="width:150px;text-align: center;">
							{{element.columnName}}
						</div>
						<div style="width:150px;text-align: center;">
							{{element.name}}
						</div>
						<div style="width:150px;text-align: center;">
							<el-select size="mini" v-model="element.viewType" placeholder="请选择"  filterable>
								<el-option v-for="item in readOnlyViewTypeList" :key="item.value" :label="item.name" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</div>
				</draggable>
			</div>
		</div>	
	</div>
</template>

<script>
	import restUtil from '@/utils/restUtil.js';
	import {
		VueDraggableNext
	} from 'vue-draggable-next';
	export default {
		name: "DisplayFieldConfigPage",
		props: ["scope"],
		components: {
			draggable: VueDraggableNext
		},
		data() {
			return {
				showPage: false,
				fieldList:[],
				readOnlyViewTypeList: [{
						"value": "label",
						"name": "标签"
					},
					{
						"value": "switch",
						"name": "Switch"
					},
					{
						"value": "tag",
						"name": "Tag"
					}
				],
				tableName:"",
				selectAll:false,
			}
		},methods: {
			init(){
				var that = this;
				restUtil.getAction(this,"detailreportdesigner/initDisplayFieldConfigPage?code="+this.scope["code"]+"&tableName="+this.tableName).then(
					function(response) {
						if (response.data.code == 1) {
							that.fieldList = response.data.fieldList;
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			},
			setVisible(visible) {
				this.showPage=visible;
				if(visible){
					var tableName=this.scope["dataSourceConfigPage"]["tableName"];
					if(this.tableName!=tableName){
						this.tableName=tableName;
						this.init();
					}
				}
			},getReturnData(){
				var data={"fieldList":this.fieldList};
				return data;
			},getPreviousPage(){
				return "dataSourceConfigPage";
			},getNextPage(){
				return "fieldConditionStylePage";
			},isCompletedPage(){
				return false;
			},onSelectAllChangeHandler(){
				for(var i=0;i<this.fieldList.length;i++){
					this.fieldList[i].display=this.selectAll;
				}
			}
		},
	}
</script>

<style>
</style>